<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <content-block>
        <div>
          <!-- 查询条件 -->
          <el-form :model="searchForm" label-width="110px" class="search-form" @submit.native.prevent>
            <el-row>
              <el-col :span="8">
                <el-form-item label="人员编号">
                  <person-rpc ref="personRpc" @personRpcCallBack="personRpcCallBack" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <personCustomCard ref="customCard" :label-obj="labelObj" />
        </div>
      </content-block>
      <content-block label="账户列表">
        <el-table
          ref="table"
          :height="170"
          :data="tableData"
          size="small"
          style="width: 100%;"
          border
          :header-cell-style="{background:'#f5f7fa', color:'#777'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="aac001" label="个人编号" width="120px" align="center" header-align="center" />
          <el-table-column v-if="false" prop="aaz116" label="个人账户id" width="120px" align="center" header-align="center" />
          <el-table-column prop="aaa119" label="账户类型" width="150px" :formatter="formatter" align="center" header-align="center" />
          <el-table-column prop="aac062" label="账户建立原因" :formatter="formatter" width="130px" align="center" header-align="center" />
          <el-table-column prop="aae206" label="建账年月" align="center" header-align="center" />
          <el-table-column prop="aic376" label="账户计息截止日期" width="150px" align="center" header-align="center" />
          <el-table-column prop="aae238" label="本金" width="120px" align="center" header-align="center" />
          <el-table-column prop="aae239" label="利息" align="center" header-align="center" />
          <el-table-column prop="aae240" label="总金额" width="120px" align="center" header-align="center" />
          <el-table-column prop="aae368" label="个人账户支出完毕标志" width="150px" :formatter="formatter" align="center" header-align="center" />
          <el-table-column prop="aae100" label="当前有效标志" width="120px" align="center" header-align="center" :formatter="formatter"/>
        </el-table>
      </content-block>
      <content-block label="银行账户信息">
        <div>
          <!-- 查询条件 -->
          <el-form ref="accountForm" :model="accountForm" label-width="140px" class="search-form" :rules="rules" disabled="true">
            <el-row>
              <el-col :span="8" class="text-right">
                <el-form-item label="个人账户总金额" prop="aae240">
                  <el-input v-model="accountForm.aae240" disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="正常账户金额" prop="jgzqyje">
                  <el-input v-model="accountForm.jgzqyje" disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8" class="text-right">
                <el-form-item label="转职业年金（改革前试点划转金额）" prop="jgznjje">
                  <el-input v-model="accountForm.jgznjje" disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="地方银行行别代码" prop="aaf216">
                  <bank-rpc ref="bankRpc" style="width: 255px" @bankRpcCallBack="bankRpcCallBack" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户行名称" prop="aae668">
                  <el-input v-model="accountForm.aae668" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="地方银行名称" prop="aaf217">
                  <el-input v-model="accountForm.aaf217" :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item v-show="false" label="人行支付系统行号">
                  <el-input v-model="accountForm.aaf002" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行户名" prop="aae009">
                  <el-input v-model="accountForm.aae009" :rows="3" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行账号" prop="aae010">
                  <el-input v-model="accountForm.aae010" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item v-show="false" label="银行行别代码">
                  <el-input v-model="accountForm.aaf200" :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </content-block>
    </div>
    <bottom-fixed>
      <div>
        <el-button type="primary" :disabled="saveDisabled" @click="save">保存</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </bottom-fixed>
  </div>
</template>

<script>
import crudBasicAc50 from '@/views/ynsb_comm/ac50/basicAc50'
import CRUD, { crud, header, presenter } from '@crud/crud'
import PersonRpc from '@/views/ynsb_comm/comm/module/personRpc'
import ContentBlock from '@/components/labers/contentBlock'
import { Loading } from 'element-ui'
import BankRpc from '@/views/ynsb_comm/comm/module/bankRpc'
import PersonCustomCard from '@/views/ynsb_comm/comm/module/personCustomCard'
import commUtil from '@/views/ynsb_comm/comm/util/commUtil'
import bottomFixed from '@/components/labers/bottomFixed'
const accountForm = {
  jgznjje: null,
  jgzqyje: null,
  aae240: null,
  aaf200: null,
  aaf216: null,
  aaf217: null,
  aae008: null,
  aaf002: null,
  aae009: null,
  aae010: null,
  aae668: null
}
const labelObj = { aac002: '社会保障号码', aac003: '姓名', aac001: '个人编号', aac006: '出生日期', aac004: '性别' }
export default {
  name: 'BasicAc01',
  components: { PersonCustomCard, BankRpc, ContentBlock, PersonRpc, bottomFixed },
  mixins: [presenter(), header(), crud()],
  cruds() {
    return CRUD({ title: '人员账户信息', url: 'api/accountAc50', idField: 'aac001', sort: 'aac001,desc', crudMethod: { ...crudBasicAc50 }})
  },
  // 数据字典
  dicts: ['aac062', 'aaa119', 'aae100','aae368'],
  data() {
    return {
      searchForm: {
        aac001: '', // 人员编号
        aac003: '' // 姓名
      },
      accountForm,
      labelObj,
      permission: {
      },
      rules: {
        aaf216: [
          { required: true, message: '地方银行类别不能为空', trigger: 'blur' }
        ],
        aae668: [
          { required: true, message: '开户行名称', trigger: 'blur' }
        ],
        aae009: [
          { required: true, message: '户名', trigger: 'blur' }
        ],
        aae010: [
          { required: true, message: '银行账号', trigger: 'blur' }
        ]
      },
      dialogVisible: false, // 控制弹窗的显示与隐藏
      selectedRow: null, // 存储被双击的行数据
      aac001: '', // 个人编号
      aaz159: '', // 参保关系id
      aae140: '', // 险种
      aac003: '', // 姓名
      tableData: [], // 表格数据
      selectedRows: [], // 勾选选中的行
      saveDisabled: true
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    formatter(row, column, cellValue) {
      // 根据 aae140 的值进行转码
      const key = column.property
      const data = this.dict[key]
      if (data === null || data === undefined || data.length === 0) {
        return cellValue
      }
      const dataList = data.filter(item => item.value === cellValue)
      console.log(dataList, 'data')
      if (dataList !== null && dataList !== [] && dataList !== undefined && dataList.length > 0) {
        return dataList[0].label
      } else {
        return cellValue
      }
    },
    personRpcCallBack(item) {
      this.accountForm.aac001 = item.aac001
      this.aac001 = item.aac001
      this.aac003 = item.aac003
      this.searchForm = {
        aac001: item.aac001,
        aac003: item.aac003
      }
      this.accountForm.aae009 = item.aac003
      // 查询账户信息
      crudBasicAc50.getAc02({ ...this.searchForm }).then(res => {
        this.$refs.customCard.fnSetContentArray(item.aac001, item.aac003, item, this.labelObj, res)
        const filteredValues = res.filter(item => item.aae140 === '120' && item.aac008 === '1')
        if (filteredValues.length === 0) {
          this.$message('未查询到该人员当前险种有效参保关系')
          return
        }
        this.aaz159 = filteredValues[0].aaz159
        this.aae140 = '120'
        crudBasicAc50.computerAccount({ aaz159: this.aaz159, aac001: this.aac001, aae140: this.aae140 }).then(res => {
          this.search()
        })
      })
    },
    search() {
      // 假设查询的数据
      crudBasicAc50.getAc50({ ...this.searchForm }).then(res => {
        console.log(res.ac50, 'res')
        this.tableData = res.ac50
        if (!commUtil.isNull(res.ae03s)) {
          this.$refs.bankRpc.getSearchResults(res.ae03s[0].aaf216)
          this.$refs.bankRpc.restAaf216(res.ae03s[0].aaf216)
          this.accountForm = { ... res.ae03s[0] }
        }
        // this.accountForm.aae238 = res.aae238
        // this.accountForm.aae239 = res.aae239
        // this.accountForm.aae240 = res.aae240
      })
    },
    handleSelectionChange(val) {
      this.selectedRows = val
      if (commUtil.isNull(val)) {
        this.$set(this.accountForm, 'jgzqyje', 0)
        this.$set(this.accountForm, 'jgznjje', 0)
        this.$set(this.accountForm, 'aae240', 0)
        return
      }
      console.log(this.accountForm, '88888888888888888888')
      // 假设查询的数据
      crudBasicAc50.getAc50({ ...this.searchForm, accountList: JSON.stringify(val) }).then(res => {
        // this.accountForm.jgzqyje = res.jgzqyje
        // this.accountForm.jgznjje = res.jgznjje
        // this.accountForm.aae240 = res.aae240
        this.$set(this.accountForm, 'jgzqyje', res.jgzqyje)
        this.$set(this.accountForm, 'jgznjje', res.jgznjje)
        this.$set(this.accountForm, 'aae240', res.aae240)
        this.saveDisabled = false
      })
    },
    // 保存
    save() {
      const businessList = this.selectedRows
      if (businessList.length === 0) {
        this.$message.error('暂无可提交的数据，请先勾选保存')
        return
      }
      const param = {
        accountList: JSON.stringify(businessList),
        aac001: this.aac001,
        aac003: this.aac003,
        ...this.accountForm
      }
      this.$refs.accountForm.validate(valid => {
        if (valid) {
          // 蒙层
          const loadingInstance = Loading.service({
            fullscreen: true, // 是否全屏
            text: '保存中...', // 加载文本
            background: 'rgba(0, 0, 0, 0.7)' // 蒙层背景颜色
          })
          crudBasicAc50.toSave({ ...param }).then(res => {
            console.log(res, '保存回调')
            // 手动关闭加载框
            this.saveDisabled = true
            this.$message.success('业务保存成功!')
            // this.search()
            // this.$successModel({ complete: true, aae016: '0' })
            loadingInstance.close()
          }).catch(res => {
            this.$message.error(res)
            loadingInstance.close()
          })
        }
      })
    },
    bankRpcCallBack(item) {
      this.$nextTick(() => {
        this.$refs.accountForm.validate()// 单独校验当前字段
      })
      this.accountForm.aaf200 = item.aaf200
      this.accountForm.aaf216 = item.aaf216
      this.accountForm.aaf217 = item.aaf217
      this.accountForm.aaf002 = item.aaf002
      this.accountForm.aae668 = item.aaf217
    },
    reset() {
      this.$refs.personRpc.restAac001('')
      this.searchForm = {
        aac001: '',
        aac003: ''
      }
      this.tableData = [] // 清空表格数据
    },
    queryCallBack() {
      this.dialogVisible = false // 显示弹窗
    },
    // 双击行触发的事件
    handleRowDblClick(row) {
      console.log(row, 'row')
      this.aac001 = row.aac001
      this.selectedRow = row // 获取双击的行数据
      this.dialogVisible = true // 显示弹窗
      setTimeout(() => {
        this.$refs.ac02ref.getAc02s()
      }, 500) // 延迟1秒后显示弹窗
    },
    // 日期格式转换
    formatDate(row, column, cellValue) {
      // 格式化日期为 YYYY-MM-DD
      if (cellValue !== null && cellValue !== undefined) {
        const date = new Date(cellValue)
        const year = date.getFullYear()
        const month = (date.getMonth() + 1).toString().padStart(2, '0')
        const day = date.getDate().toString().padStart(2, '0')
        return `${year}-${month}-${day}`
      } else {
        return '--'
      }
    }
  }
}
</script>

<style scoped>

</style>
